﻿.form-check > .form-check-input.form-check-input-pointer,
.form-check > .form-check-label.form-check-label-pointer,
.form-switch > .form-check-input.form-check-input-pointer,
.form-switch > .form-check-label.form-check-label-pointer {
    cursor: pointer;
}

.form-control-plaintext {
    &.form-control-xs,
    &.form-control-md,
    &.form-control-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

.form-control-xs {
    height: $input-height-xs;
    padding: $input-padding-y-xs $input-padding-x-xs;
    font-size: $input-font-size-xs;
    line-height: $input-line-height-xs;
    border-radius: $input-border-radius-xs;
}

.form-control-md {
    height: $input-height-md;
    padding: $input-padding-y-md $input-padding-x-md;
    font-size: $input-font-size-md;
    line-height: $input-line-height-md;
    border-radius: $input-border-radius-md;
}

.form-control-xl {
    height: $input-height-xl;
    padding: $input-padding-y-xl $input-padding-x-xl;
    font-size: $input-font-size-xl;
    line-height: $input-line-height-xl;
    border-radius: $input-border-radius-xl;
}

.form-select-xs {
    height: $custom-select-height-xs;
    padding-top: $custom-select-padding-y-xs;
    padding-bottom: $custom-select-padding-y-xs;
    padding-left: $custom-select-padding-x-xs;
    font-size: $custom-select-font-size-xs;
}

.form-select-md {
    height: $custom-select-height-md;
    padding-top: $custom-select-padding-y-md;
    padding-bottom: $custom-select-padding-y-md;
    padding-left: $custom-select-padding-x-md;
    font-size: $custom-select-font-size-md;
}

.form-select-xl {
    height: $custom-select-height-xl;
    padding-top: $custom-select-padding-y-xl;
    padding-bottom: $custom-select-padding-y-xl;
    padding-left: $custom-select-padding-x-xl;
    font-size: $custom-select-font-size-xl;
}

.input-group {
    > .b-numeric:not(:last-child) > input,
    > div.flatpickr-wrapper:not(:last-child) > input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    > .b-numeric:not(:first-child) > input,
    > div.flatpickr-wrapper:not(:first-child) > input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.input-group-xs > .form-control:not(textarea),
.input-group-xs > .form-select,
.input-group-xs > .b-numeric > input {
    height: $input-height-xs;
}

.input-group-xs > .form-control,
.input-group-xs > .form-select,
.input-group-xs > .input-group-text,
.input-group-xs > .btn,
.input-group-xs > .b-numeric > input {
    padding: $input-padding-y-xs $input-padding-x-xs;
    font-size: $input-font-size-xs;
    line-height: $input-line-height-xs;
    border-radius: $input-border-radius-xs;
}

.input-group-sm > .b-numeric > input {
    height: $input-height-sm;
}

.input-group-sm > .b-numeric > input {
    padding: $input-padding-y-sm $input-padding-x-sm;
    font-size: $input-font-size-sm;
    line-height: $input-line-height-sm;
    border-radius: $input-border-radius-sm;
}

.input-group-md > .form-control:not(textarea),
.input-group-md > .form-select,
.input-group-md > .b-numeric > input {
    height: $input-height-md;
}

.input-group-md > .form-control,
.input-group-md > .form-select,
.input-group-md > .input-group-text,
.input-group-md > .btn,
.input-group-md > .b-numeric > input {
    padding: $input-padding-y-md $input-padding-x-md;
    font-size: $input-font-size-md;
    line-height: $input-line-height-md;
    border-radius: $input-border-radius-md;
}

.input-group-lg > .b-numeric > input {
    height: $input-height-lg;
}

.input-group-lg > .b-numeric > input {
    padding: $input-padding-y-lg $input-padding-x-lg;
    font-size: $input-font-size-lg;
    line-height: $input-line-height-lg;
    border-radius: $input-border-radius-lg;
}

.input-group-xl > .form-control:not(textarea),
.input-group-xl > .form-select,
.input-group-xl > .b-numeric > input {
    height: $input-height-xl;
}

.input-group-xl > .form-control,
.input-group-xl > .form-select,
.input-group-xl > .input-group-text,
.input-group-xl > .btn,
.input-group-xl > .b-numeric > input {
    padding: $input-padding-y-xl $input-padding-x-xl;
    font-size: $input-font-size-xl;
    line-height: $input-line-height-xl;
    border-radius: $input-border-radius-xl;
}

.input-group-xs > .form-select,
.input-group-md > .form-select,
.input-group-xl > .form-select {
    padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}


// Prepend and append rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.

.input-group:not(.has-validation) > .dropdown:first-child > .btn:not(:last-child).dropdown-toggle, {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group.has-validation > .dropdown > .btn:not(:last-child).dropdown-toggle,
.input-group.has-validation > .dropdown > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group {
    > div.flatpickr-wrapper {
        > .form-control {
            position: relative;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
        }
    }
}

@mixin checkbox($size, $width, $height, $line-height, $padding-left) {
    .form-check {
        > .form-check-input.form-check-input-#{$size} {
            width: $width;
            height: $height;

            + .form-check-label {
                line-height: $line-height;
                padding-left: $padding-left;
            }
        }
    }
}

@include checkbox('xs', .7rem, .7rem, 'normal', 0px);
@include checkbox('sm', .8rem, .8rem, 'normal', 0px);
@include checkbox('md', 1.25rem, 1.25rem, 1.7rem, 3px);
@include checkbox('lg', 1.55rem, 1.55rem, 2rem, 6px);
@include checkbox('xl', 1.85rem, 1.85rem, 2.5rem, 10px);

select[readonly] {
    pointer-events: none;

    option,
    optgroup {
        display: none;
    }
}

.b-numeric {
    position: relative;
    width: 100%;

    &:hover > .b-numeric-handler-wrap {
        opacity: 1;
    }

    input:disabled, input:read-only {
        + .b-numeric-handler-wrap {
            display: none;
        }
    }
}

.b-numeric-handler-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    opacity: 0;
}

.input-group .b-numeric {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}

.b-numeric-handler-wrap {
    .b-numeric-handler.b-numeric-handler-down {
        border-top: 1px solid #d9d9d9;
    }
}

.b-numeric-handler {
    position: relative;
    display: flex;
    width: 100%;
    height: 50%;
    overflow: hidden;
    color: rgba(0,0,0,.45);
    font-weight: 700;
    line-height: 0;
    align-items: center;
    justify-content: center;

    &.btn {
        padding: 0;
    }
}

.form-control + .b-numeric-handler-wrap {
    font-size: $input-font-size;
    border-top-right-radius: $input-border-radius;
    border-bottom-right-radius: $input-border-radius;
}

.form-control-xs + .b-numeric-handler-wrap {
    font-size: $input-font-size-xs;
    border-top-right-radius: $input-border-radius-xs;
    border-bottom-right-radius: $input-border-radius-xs;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-xs;
    }
}

.form-control-sm + .b-numeric-handler-wrap {
    font-size: $input-font-size-sm;
    border-top-right-radius: $input-border-radius-sm;
    border-bottom-right-radius: $input-border-radius-sm;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-sm;
    }
}

.form-control-md + .b-numeric-handler-wrap {
    font-size: $input-font-size-md;
    border-top-right-radius: $input-border-radius-md;
    border-bottom-right-radius: $input-border-radius-md;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-md;
    }
}

.form-control-lg + .b-numeric-handler-wrap {
    font-size: $input-font-size-lg;
    border-top-right-radius: $input-border-radius-lg;
    border-bottom-right-radius: $input-border-radius-lg;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-lg;
    }
}

.form-control-xl + .b-numeric-handler-wrap {
    font-size: $input-font-size-xl;
    border-top-right-radius: $input-border-radius-xl;
    border-bottom-right-radius: $input-border-radius-xl;

    > .b-numeric-handler.btn {
        font-size: $input-font-size-xl;
    }
}

.custom-file-label {
    overflow: hidden;
}

input[readonly][type=range],
input[readonly="readonly"][type=range] {
    pointer-events: none;

    &::-webkit-slider-thumb {
        pointer-events: none;
    }

    &::-moz-range-thumb {
        pointer-events: none;
    }

    &::-ms-thumb {
        pointer-events: none;
    }
}

.form-group {
    margin-bottom: $form-group-margin-bottom;
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
    // Because we use flex, the initial sizing of checkboxes is collapsed and
    // doesn't occupy the full-width (which is what we want for xs grid tier),
    // so we force that here.
    .form-check {
        width: 100%;
    }
    // Kick in the inline
    @include media-breakpoint-up(sm) {
        label {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
        }
        // Inline-block all the things for "inline"
        .form-group {
            display: flex;
            flex: 0 0 auto;
            flex-flow: row wrap;
            align-items: center;
            margin-bottom: 0;
        }
        // Allow folks to *not* use `.form-group`
        .form-control {
            display: inline-block;
            width: auto; // Prevent labels from stacking above inputs in `.form-group`
            vertical-align: middle;
        }
        // Make static controls behave like regular ones
        .form-control-plaintext {
            display: inline-block;
        }

        .input-group,
        .custom-select {
            width: auto;
        }
        // Remove default margin on radios/checkboxes that were used for stacking, and
        // then undo the floating of radios and checkboxes to match.
        .form-check {
            display: flex;
            align-items: center;
            justify-content: center;
            width: auto;
            padding-left: 0;
        }

        .form-check-input {
            position: relative;
            flex-shrink: 0;
            margin-top: 0;
            margin-right: $form-check-input-margin-x;
            margin-left: 0;
        }

        .form-select {
            align-items: center;
            justify-content: center;
        }

        .form-check-label {
            margin-bottom: 0;
        }
    }
}

.b-input-color-picker {
    padding: .5rem .6rem;

    > .b-input-color-picker-preview {
        height: .55rem;
    }
}

.focus-trap {
    display: contents;
}

.form-file input[type=file] {
    margin-left: -2px !important;
}

.form-file input[type=file]::-webkit-file-upload-button {
    display: none;
}

.form-file input[type=file]::file-selector-button {
    display: none;
}

.form-label-required:after {
    content: " *";
    color: var(--b-theme-danger, $danger);
}

// when flatpickr-wrapper is inside a form-group, make sure the calendar dropdown is positioned correctly
.form-group.row {
    > label {
        + div:has( > .flatpickr-wrapper) {
            position: relative;
        }
    }
}
